<script setup lang="ts">
defineOptions({
  name: "RetailShop"
});
</script>

<template>
  <dv-full-screen-container>
    <div class="box">
      <div class="head">
        <ExposureAnalysisHead />
      </div>
      <div class="box-container">
        <div class="box-container-itemTop">
          <div class="box-container-itemTop-left" />
          <div class="box-container-itemTop-center" />
          <div class="box-container-itemTop-right" />
        </div>

        <div class="box-container-itemCenter">
          <div class="box-container-itemCenter-item" />
          <div class="box-container-itemCenter-item" />
          <div class="box-container-itemCenter-item" />
          <div class="box-container-itemCenter-item" />
        </div>
        <div class="box-container-itemBottom">
          <div class="box-container-itemBottom-left" />
          <div class="box-container-itemBottom-center" />
          <div class="box-container-itemBottom-right" />
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
$head-height: 3rem; //头部高度
$container-height: 40rem;
$gap: 1rem; //模块间距

.box {
  width: 100%;
  height: 100%;
  background: url("./components/src/assets/bg.jpg") no-repeat center center;
  background-size: 100% 100%;

  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: $head-height;
  }

  .box-container {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr 0.5fr 1fr;
    gap: $gap;
    width: 100%;
    height: calc(100% - $head-height);
    padding: 20px;

    .box-container-itemTop {
      display: grid;
      grid-template-columns: 1fr calc(1fr * 2.036) 1fr;
      gap: $gap;

      .box-container-itemTop-left {
        background-color: #15b712;
      }

      .box-container-itemTop-center {
        background-color: #331e5c;
      }

      .box-container-itemTop-right {
        background-color: aquamarine;
      }
    }

    .box-container-itemCenter {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: $gap;

      .box-container-itemCenter-item {
        background-color: #15b712;
      }
    }

    .box-container-itemBottom {
      display: grid;
      grid-template-columns: 1fr calc(1fr * 2.036) 1fr;
      gap: $gap;

      .box-container-itemBottom-left {
        background-color: #15b712;
      }

      .box-container-itemBottom-center {
        background-color: #331e5c;
      }

      .box-container-itemBottom-right {
        background-color: #331e5c;
      }
    }
  }

  .bottom {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: $gap;
    width: 100%;
    height: calc(100% - $head-height - $container-height);
    padding: 20px;

    .bottom-item {
      background-color: #000;
    }
  }
}
</style>
